<template>
  <div class="detail">
    <a-table
      :columns="columns"
      :data-source="tableData"
      :row-key="record => record.id"
      :loading="loading"
      :pagination="false"
      :scroll="{ y: tableHeight }"
      bordered
      class="bordered-table"
    ></a-table>

    <div class="space-between" slot="footer">
      <div class="pagination-total">
        共 <span class="total-num">{{ this.pagination.total }}</span> 条
      </div>
      <a-pagination
        v-model:current="this.pagination.current"
        :total="this.pagination.total"
        :pageSize="this.pagination.pageSize"
        @change="paginationChange"
      />
    </div>
  </div>
</template>

<script>
import {
  Button,
  Tag,
  Icon,
  Menu,
  Table,
  Input, Divider,
  Pagination
} from 'ant-design-vue';
import {mjzzd} from "../api/jzsj";

export default {
  name: 'ZYZD',
  components: {
    'a-table': Table,
    'a-button': Button,
    'a-icon': Icon,
    'a-input': Input,
    'a-tag': Tag,
    'a-divider': Divider,
    'a-menu': Menu,
    'a-menu-item': Menu.Item,
    "a-pagination": Pagination,
  },
  data() {
    return {
      // 表格加载状态
      loading: false,
      tableHeight: 500,
      patientId: '',
      // 原始数据
      tableData: [],

      // // 分页配置
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },

      // 列定义
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          key: 'id',
          align: 'center'
        },
        {
          title: 'xlp',
          dataIndex: 'xlp',
          key: 'xlp',
          align: "center"
        },
        {
          title: 'xlm',
          dataIndex: 'xlm',
          key: 'xlm',
          align: "center"
        },
        {
          title: '诊断序号',
          dataIndex: 'zdxh',
          key: 'zdxh',
          align: "center"
        },
        {
          title: '诊断编码',
          dataIndex: 'zdbm',
          key: 'zdbm',
          align: "center"
        },
        {
          title: '诊断名称',
          dataIndex: 'zdmc',
          key: 'zdmc',
          align: "center"
        }
      ]
    }
  },
  mounted() {
    const userId = this.$route.query.id;
    this.patientId = userId;
    this.mjzzdList(userId, 1, 10)
  },
  methods: {
    async mjzzdList(id, page, pageSize) {
      this.loading = true;
      this.pagination.current = page;
      this.pagination.pageSize = pageSize;

      let params = {
        pageNum: page,
        pageSize: pageSize,
        patientId: id
      }

      let res = await mjzzd(params);
      if (res.status === 0) {
        this.tableData = res.data;
        this.loading = false;
        this.pagination.total = res.total;
      }
    },
    paginationChange(page, pageSize) {
      this.mjzzdList(this.patientId, page, pageSize)
    }
  }
}

</script>

<style>
.detail {
  padding: 20px;
  background-color: #fff;
  min-height: 100px;
}

#components-layout-demo-custom-trigger {
  height: 100vh;
}

.detail-layout-header {
  background: #fff;
  padding: 0 20px;
  align: "left";
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.detail-layout-content {
  margin: 24px 16px;
  padding: 24px;
  background: #fff;
  min-height: calc(100vh - 130px);
}

.sider {
  transition: all 0.3s;
}

.detail-header {
  margin: 0 0 0 0;
}
</style>
